<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrapNo">
						<view class="item-title">显示位置:</view>
						<input placeholder="请输入显示位置" placeholder-class="placeholderclass" class="input-box" v-model="location" maxlength="50"/>
					</view>
					<view class="info-item flexWrapNo" @tap="selectLocation()">
						<view class="item-title">地图匹配位置:</view>
						<!-- <input placeholder="选择地址" disabled   placeholder-class="placeholderclass" class="input-box" v-model="address" maxlength="-1"/> -->
						<scroll-view scroll-x  class="input-box">
							<view style="width: 150%;line-height: 100upx;">{{address||"请选择地址"}}</view>
						</scroll-view>
						<image src="/static/shop/edit-icon.png" class="edit-icon"></image>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">经纬度:</view>
						<input placeholder-class="placeholderclass" class="input-box" v-model="longitudeLatitude"/>
					</view>
				</view>
				<view class="map-box">
					 <!-- @regionchange="regionchange" @tap="clickMap" -->
					<map :latitude="latitude" :longitude="longitude" :markers="markers" controls></map>
				</view>
				<view class="exeplan-box">
					<view class="exeplan-title">
						备注信息:
					</view>
					<view>1、显示位置是显示在小程序首页的位置</view>
					<view>2、地图匹配位置是地图中红点所指的地点,用于导航;</view>
					<view>3、可通过拖拽地图,点击地图更改红点位置</view>
				</view>
				<view class="bottom-box flexWrapNo" @tap="addressSave()">
					<view class="define-btn">确定</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import tools from '@/common/lib/tools'
	export default {
		data() {
			return {
				pageOpc: 0,
				latitude: "",
				longitude: "",
				name:"",
				location:"",
				address:"",
				markers: [{
					id: 0,
					latitude: 23.099994,
					longitude: 113.324520,
					width: 24,
					height: 30
				}],
				longitudeLatitude:"",
				
				imageList:[],
				uploadList:[],
				video_url:"",
				franchisee_phone:"",
				customer_service_mobile:"",
				showTime:"",
				business_hours:"",
				location:"",
				is_today:0,
				is_txMap:0,
				blessing_txt: "",
				
				oldLatitude:'',
				oldLongitude:'',
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onLoad() {
			let that = this
			this.getStoreInfo();
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	geocode: true,
			// 	isHighAccuracy: true,
			// 	success: function(res) {
			// 		console.log(res)
			// 		that.longitude = res.longitude
			// 		that.latitude = res.latitude
			// 		that.markers[0].latitude=res.latitude
			// 		that.markers[0].longitude=res.longitude
			// 		that.longitudeLatitude=res.longitude+','+res.latitude
			// 	},
			// 	fail(res) {
			// 		that.$tools.showToast('请打开GPS后下拉刷新');
			// 	}
			// });
		},
		methods: {
			addressSave(){
				let pages = getCurrentPages(); //当前页
				let beforePage = pages[pages.length - 2]; //上个页面
				if(this.oldLatitude!=this.latitude&&this.oldLongitude!=this.longitude){
					uni.showModal({
						content: '定位发生变化，有可能产生位置飘移，请确认是否变更？ ',
						cancelText:'确定',
						cancelColor:'#333',
						confirmText:'取消',
						confirmColor:'#ff0000',
						success:res=>{
							// 注意：调换了事件
							if (res.confirm) {
								
							} else if (res.cancel) {
								// console.log('用户点击取消');
								beforePage.$vm.latitude=this.latitude
								beforePage.$vm.longitude=this.longitude
								beforePage.$vm.location=this.location
								beforePage.$vm.is_txMap=1
								this.is_txMap=1
								this.setStoreInfo();
								setTimeout(()=>{
									uni.navigateBack({delta:1})
								},1000)
							}
						}
					});
				}else{
					beforePage.$vm.latitude=this.latitude
					beforePage.$vm.longitude=this.longitude
					beforePage.$vm.location=this.location
					beforePage.$vm.is_txMap=1
					this.setStoreInfo();
					setTimeout(()=>{
						uni.navigateBack({delta:1})
					},1000)
				}
			},
			selectLocation() {
				let that=this
				uni.chooseLocation({
					longitude: that.markers[0].longitude, // 初始经度
					latitude: that.markers[0].latitude,  // 初始纬度
					
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.name=res.name
						that.address=res.address
						that.markers[0].latitude=res.latitude
						that.markers[0].longitude=res.longitude
						that.latitude=res.latitude
						that.longitude=res.longitude
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			// 店铺信息
			getStoreInfo(){
				this.$request.post(this.$api.storeInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.location=data.location
						this.latitude=data.latitude
						this.longitude=data.longitude
						
						this.oldLatitude=data.latitude
						this.oldLongitude=data.longitude
						this.markers[0].latitude=this.latitude
						this.markers[0].longitude=this.longitude
						this.longitudeLatitude=this.longitude+','+this.latitude
						this.imageList=data.shop_cover_images.split(',');
						this.uploadList=data.shop_cover_images.split(',');
						this.video_url=data.video_url
						this.business_hours=data.business_hours
						this.is_today=data.is_today
						this.customer_service_mobile=data.customer_service_mobile
						this.franchisee_phone=data.franchisee_phone
						this.is_txMap=data.is_tencent_map
						this.blessing_txt=data.blessing_txt
						this.loadCity(this.longitude,this.latitude);
					}
				})
			},
			
			setStoreInfo(){
				this.$request.post(this.$api.setStoreInfo, {
					store_id:uni.getStorageSync('store_id'),
					franchisee_phone:this.franchisee_phone,
					shop_cover_images:this.uploadList.join(','),
					business_hours:this.business_hours,
					location:this.location,
					is_today:this.is_today,
					customer_service_mobile:this.customer_service_mobile,
					latitude:this.latitude,
					longitude:this.longitude,
					video_url:this.video_url,
					is_txMap:1,
					blessing_txt: this.blessing_txt,
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('设置成功')
					}
				})
			},
			
			regionchange(res){
				if(res.detail.type=='end'){
					res=res.detail.centerLocation
					this.markers[0].latitude=res.latitude
					this.markers[0].longitude=res.longitude
					this.longitudeLatitude=res.longitude+','+res.latitude
					// this.latitude=res.latitude
					// this.longitude=res.longitude
				}
			},
			clickMap(res){
				console.log(res)
				res=res.detail
				this.markers[0].latitude=res.latitude
				this.markers[0].longitude=res.longitude
				this.longitudeLatitude=res.longitude+','+res.latitude
				this.latitude=res.latitude
				this.longitude=res.longitude
				this.loadCity(this.longitude,this.latitude);
			},
			loadCity(longitude, latitude) {
				if(!longitude&&!latitude){
					return;
				}
				let that = this
				uni.request({
					header: {
						'Content-Type': 'application/text',
					},
					//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
					url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
						longitude +
						',' +
						latitude +
						'&key=ca84e2d785233c42b21c545df85411b9&radius=1000&extensions=all',
					success(res) {
						if (res.statusCode === 200) {
							console.log('获取地址信息',res.data.regeocode)
							that.address=res.data.regeocode.formatted_address
						} else {
							console.log('获取信息失败，请重试！')
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;

		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 20upx 0;

				.item-title {
					margin-right: 12upx;
					flex: none;
					font-size: 28rpx;
					width: 180upx;
				}

				.input-box {
					height: 100upx;
					width: 500upx;
					background:#1D1C5C;
					border-radius: 16upx;
					padding: 0 32upx;
					margin-top: 14upx;
					color: #fff;
					.placeholderClass {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, .5);
					}
				}
				.edit-icon{
					width: 40upx;
					height: 40upx;
					flex: none;
					margin-left: 10upx;
				}
				input {
					height: 100upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #fff;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.map-box {
			height: 600upx;
			margin: 20upx 0;

			map {
				width: 100%;
				height: 100%;
			}
		}

		.exeplan-box {
			font-size: 28upx;
			color: #FFFFFF;
			line-height: 46upx;

			.exeplan-title {
				font-size: 32upx;
				margin-bottom: 20upx;
			}
		}

		.bottom-box {
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>